<template>
	<view class="content">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">编辑求职意向</view>
			<view class="sub-title">不同的求职期望，推荐的职位也会不同</view>
			<view class="form-item">
				<view class="form-label">期望职位</view>
				<view class="form-content">
					<input v-model="form.postNames" maxlength="30" type="text" placeholder="请选择期望职位"
						placeholder-class="inputPlaceholder" disabled="true" @click="chooseJobCategory"
						class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-label">期望地点</view>
				<view class="form-content">
					<view class="form-ctrl">
						<uni-data-picker @change="bindRegion" v-model="form.regArea" :localdata="region"
							parent-field="children">
						</uni-data-picker>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">期望薪资</view>
				<view class="form-content">
					<picker class="form-ctrl" mode="multiSelector" :value="salaryIndexArr" :range="salary"
						@columnchange="salaryColChange" @change="salaryChange">{{form.salaryMin}}-{{form.salaryMax}}元
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">职位分类</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="type" range-key="value" :value="form.recruitType-1"
						@change="bindType">
						{{type[form.recruitType-1]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="btn" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getSalaryData
	} from '@/util/util.js'
	import {
		submitIntention,
		getIntention
	} from '@/api/resume.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				id: null,
				form: {
					id: 0,
					salaryMin: 1000,
					salaryMax: 2000,
					post: null,
					regArea: null,
					recruitType: 1,
					industryType: 1,
					postNames: ''
				},
				industry: [],
				rules: {
					post: {
						name: '期望职位',
						required: true
					},
					regArea: {
						name: '期望地点',
						required: true
					}
				},
				//地点选择
				region: [],
				//薪资选择
				salary: [],
				salaryIndexArr: [0, 0],
				//全职兼职选择
				type: [{
					id: 1,
					value: '全职'
				}, {
					id: 2,
					value: '兼职'
				}],
				typeIndex: 0,
				regionArr: [],
			}
		},
		methods: {
			salaryChange(e) {
				this.form.salaryMin = this.salary[0][e.detail.value[0]]
				this.form.salaryMax = this.salary[1][e.detail.value[1]]
			},
			salaryColChange(e) {
				if (e.detail.column == 0) {
					this.getSalary(e.detail.value + 1)
				}
			},
			getSalary(select) {
				this.salary = getSalaryData(select);
			},
			bindType(e) {
				this.form.recruitType = e.detail.value * 1 + 1
			},
			bindIndustryType(e) {
				this.form.industryType = e.detail.value * 1 + 1
			},
			bindRegion(e) {
				this.regionArr = e.detail.value.map((item) => {
					return item.value
				})
			},
			chooseJobCategory() {
				uni.navigateTo({
					url: '/page_other/job_category/index?max=1'
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					let form = JSON.parse(JSON.stringify(this.form));
					form.regArea = this.regionArr.join(',');
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					submitIntention(form).then(() => {
						uni.$emit('refresh', 1)
						this.showToast('保存成功', () => {
							uni.navigateBack()
						});
					})
				}
			},
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getIntention({
					id
				}).then((res) => {
					let regionArr = res.regArea.split(',');
					res.regArea = regionArr[2]
					this.regionArr = regionArr;
					this.salaryIndexArr = [res.salaryMin / 1000 - 1, (res.salaryMax - res.salaryMin) / 1000 - 1]
					this.getSalary(res.salaryMin / 1000);
					this.form = res
				}).catch(() => {
					this.showToast('加载失败', () => {
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(e) {
			this.region = this.globalConfig.area
			uni.$on('getJobCategory', (e) => {
				this.form.post = e[0].id
				this.form.postNames = e[0].jobTitle;
			})
			if (e.id) {
				this.getDetail(e.id)
			} else {
				this.getSalary(1);
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		width: 100%;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
